<template>
  <!-- 浮动侧边栏容器 -->
  <div
      class="sidebar-container"
      :class="{'collapsed': isCollapsed}"
      :style="{
      width: isCollapsed ? '60px' : '10vw',
    }"
  >
    <!-- 垂直居中的伸缩按钮 -->
    <div class="toggle-button" @click="toggleSidebar">
      <el-icon :size="24">
        <component :is="isCollapsed ? Expand : Fold" />
      </el-icon>
    </div>

    <!-- 菜单组件 -->
    <el-menu
        :default-active="activeKey"
        class="el-menu-vertical-demo"
        background-color="var(--sidebar-bg)"
        text-color="var(--sidebar-text)"
        active-text-color="var(--sidebar-active)"
        :collapse="isCollapsed"
        :collapse-transition="false"
        router
    >
      <!-- 数据汇聚与导入 -->
      <el-sub-menu index="/data-aggregation">
        <template #title>
          <el-icon><HomeFilled /></el-icon>
          <span>数据汇聚与导入</span>
        </template>
        <el-menu-item index="/data-aggregation/monitor">数据接入监控页</el-menu-item>
        <el-menu-item index="/data-aggregation/storage">存储管理</el-menu-item>
      </el-sub-menu>

      <!-- 数据治理 -->
      <el-sub-menu index="/data-governance">
        <template #title>
          <el-icon><Setting /></el-icon>
          <span>数据治理</span>
        </template>
<!--        <el-menu-item index="/data-governance/home">清洗规则配置</el-menu-item>-->
        <el-menu-item index="/data-governance/board">标准化看板</el-menu-item>
        <el-menu-item index="/data-governance/process">过程追踪</el-menu-item>
      </el-sub-menu>

      <!-- 多模态分析 -->
      <el-sub-menu index="/multimodal-analysis">
        <template #title>
          <el-icon><DataAnalysis /></el-icon>
          <span>多模态分析</span>
        </template>
        <el-menu-item index="/multimodal-analysis/home">数据表征识别</el-menu-item>
        <el-menu-item index="/multimodal-analysis/model">跨模态关联</el-menu-item>
        <el-menu-item index="/multimodal-analysis/feature">特征融合实验室</el-menu-item>
        <el-menu-item index="/multimodal-analysis/analyse">智能分析工作台</el-menu-item>
      </el-sub-menu>

      <!-- 检索引擎模块 -->
      <el-sub-menu index="/search-engine">
        <template #title>
          <el-icon><Search /></el-icon>
          <span>检索引擎模块</span>
        </template>
        <el-menu-item index="/search-engine/home">多维检索中心</el-menu-item>
        <el-menu-item index="/search-engine/list">结果处理工作区</el-menu-item>
        <el-menu-item index="/search-engine/detail">知识图谱透视页</el-menu-item>
      </el-sub-menu>

      <!-- 核心可视化 -->
      <el-sub-menu index="/visualization">
        <template #title>
          <el-icon><DataLine /></el-icon>
          <span>核心可视化</span>
        </template>
        <el-menu-item index="/visualization/home">电磁态势总览页</el-menu-item>
        <el-menu-item index="/visualization/list">信号分析实验室</el-menu-item>
        <el-menu-item index="/visualization/detail">威胁评估驾驶舱</el-menu-item>
      </el-sub-menu>

      <!-- 系统管理 -->
      <el-sub-menu index="/system-management">
        <template #title>
          <el-icon><Monitor /></el-icon>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/system-management/home">流程监控中心</el-menu-item>
        <el-menu-item index="/system-management/list">安全审计页</el-menu-item>
        <el-menu-item index="/system-management/detail">数据目录导航器</el-menu-item>
      </el-sub-menu>

      <!-- 场景仿真 -->
      <el-sub-menu index="/scenario-simulation">
        <template #title>
          <el-icon><MagicStick /></el-icon>
          <span>场景仿真</span>
        </template>
        <el-menu-item index="/scenario-simulation/home">剧情编辑工作台</el-menu-item>
        <el-menu-item index="/scenario-simulation/list">仿真推演控制台</el-menu-item>
        <el-menu-item index="/scenario-simulation/detail">数据集工厂</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script>
import {
  HomeFilled,
  Setting,
  DataAnalysis,
  Search,
  DataLine,
  Monitor,
  MagicStick, Expand, Fold
} from '@element-plus/icons-vue'
import {ElIcon, ElMenu, ElMenuItem, ElSubMenu} from "element-plus";
import '/src/assets/styles/sidebar.css';
import '/src/assets/styles/global.css';
import '/src/views/data-aggregation/monitor.vue'
export default {
  computed: {
    Fold() {
      return Fold
    },
    Expand() {
      return Expand
    }
  },
  components: {
    HomeFilled,
    Setting,
    DataAnalysis,
    Search,
    DataLine,
    Monitor,
    MagicStick,
    ElMenu,
    ElMenuItem,
    ElIcon,
    ElSubMenu,  // 添加子菜单组件
    Expand,
    Fold
  },
  data() {
    return {
      activeKey: '',
      isCollapsed: false, // 控制侧边栏伸缩状态
      sidebarWidth: '18vw' // 初始宽度
    }
  },
  mounted() {
    this.updateActiveKey()
    // 添加响应式处理
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    updateActiveKey() {
      // 直接使用当前路由路径
      this.activeKey = this.$route.path;
    },
    toggleSidebar() {
      this.isCollapsed = !this.isCollapsed;
    },
    handleResize() {
      // 移动设备下自动折叠
      if (window.innerWidth <= 768) {
        this.sidebarWidth = '70vw';
        if (!this.isCollapsed) this.isCollapsed = true;
      } else {
        this.sidebarWidth = '18vw';
      }
    }
  },
  watch: {
    '$route'(to) {
      this.updateActiveKey()
    }
  }
}
</script>
